<template>
  <div class="app-container">

    <el-card class="box-card">

      <!--查询条件-->
      <!--  <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch">
          <el-form-item label="菜单名称" prop="menuName">
            <el-input
              v-model="queryParams.menuName"
              placeholder="请输入菜单名称"
              clearable=""
              size="small"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="状态" prop="available">
            <el-select v-model="queryParams.available" placeholder="菜单状态"
                       clearable size="small" value=""
                       @keyup.enter.native="handleQuery">
              <el-option
                v-for="item in statusOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="类型" prop="type">
            <el-select v-model="queryParams.type" placeholder="菜单类型"
                       clearable size="small" value=""
                       @keyup.enter.native="handleQuery">
              <el-option
                v-for="item in menuType"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>-->

      <!--菜单表格显示区域-->
      <el-table
        v-loading="loading"
        :data="menuList"
        style="width: 100%"
        row-key="id"
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
        <el-table-column prop="name" label="菜单名称" :show-overflow-tooltip="true" fixed="left"
                         width="200"></el-table-column>
        <el-table-column prop="remark" label="描述" width="160"></el-table-column>
        <el-table-column prop="sort" label="排序" width="60"></el-table-column>
        <el-table-column prop="createTime" label="创建时间" align="center" width="180"></el-table-column>
        <el-table-column prop="modifiedTime" label="修改时间" align="center" width="180"></el-table-column>
        <el-table-column label="操作" align="center" fixed="right" width="200">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="handleUpdate(scope.row)">修改
            </el-button>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-plus"
              @click="handleAdd(scope.row)">新增
            </el-button>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="handleDelete(scope.row)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 添加或修改菜单对话框 -->
      <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body=""
                 @close="closeDialog">
        <el-form ref="form" :model="form" :rules="rules" label-width="80px">
          <el-row>
            <el-col :span="24">
              <el-form-item label="上级菜单">
                <treeselect
                  v-model="form.pid"
                  :options="menuOptions"
                  :normalizer="normalizer"
                  :show-count="true"
                  placeholder="选择上级菜单"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="菜单名称" prop="name">
                <el-input v-model="form.name" placeholder="请输入菜单名称"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="显示排序" prop="sort">
                <el-input-number v-model="form.sort" controls-position="right" :min="0"/>
              </el-form-item>
            </el-col>
            <el-col>
              <el-form-item label="备注信息" prop="remark">
                <el-input type="textarea" v-model="form.remark"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancel">取 消</el-button>
          <el-button type="primary" @click="submitForm">确 定</el-button>
        </div>
      </el-dialog>

    </el-card>
  </div>
</template>

<script>

  import treeselect from '@riophae/vue-treeselect'
  import '@riophae/vue-treeselect/dist/vue-treeselect.css'
  import {
    getCategory,
    delMenu,
    addMenu,
    updateMenu
  } from '../../../api/biz/productCategory'

  export default {
    name: 'ProductCategory',
    components: {
      treeselect,
    },
    data () {
      return {
        // 遮罩层
        loading: true,
        // 显示搜索条件
        showSearch: true,
        // 菜单表格树数据
        menuList: [],
        // 菜单树选项
        menuOptions: [],
        // 弹出层标题
        title: '',
        // 是否显示弹出层
        open: false,
        // 菜单状态数据字典
        statusOptions: [{
          'label': '禁用',
          'value': 0
        }, {
          'label': '可用',
          'value': 1
        }],
        menuType: [{
          'label': '菜单',
          'value': 0
        }, {
          'label': '目录',
          'value': 1
        }, {
          'label': '按钮',
          'value': 2
        }],
        // 查询参数

        // 表单参数
        form: {},
        // 表单校验
        rules: {
          name: [
            {
              required: true,
              message: '菜单名称不能为空',
              trigger: 'blur'
            }
          ],
          sort: [
            {
              required: true,
              message: '菜单顺序不能为空',
              trigger: 'blur'
            }
          ],
          remark: [
            {
              required: true,
              message: '描述不能为空',
              trigger: 'blur'
            }
          ]
        }
      }
    },
    created () {
      this.getList()
    },
    methods: {

      /** 查询物资分类列表 */
      getList () {
        this.loading = true
        getCategory().then(res => {
          if (res) {
            this.menuList = res.data.data.menus
            this.getMenuList(this.menuList)
            this.loading = false
          }
        })
      },

      /** 查询下拉菜单列表 */
      getMenuList (val) {
        this.menuOptions = []
        const menuList = val
        const menu = {
          id: 0,
          name: '主菜单',
          children: []
        }
        menu.children = menuList
        this.menuOptions.push(menu)
      },
      /** 转换菜单数据结构 */
      normalizer (node) {
        if (node.children && !node.children.length) {
          delete node.children
        }
        return {
          id: node.id,
          label: node.name,
          children: node.children
        }
      },
      // 取消按钮
      cancel () {
        this.open = false
        this.reset()
      },
      // 表单重置
      reset () {
        this.resetForm('form')
        this.form = {}
      },
      /** 搜索按钮操作 */
      handleQuery () {
        this.getList()
      },
      /** 重置按钮操作 */
      resetQuery () {
        this.resetForm('queryForm')
        this.handleQuery()
      },
      /** 新增按钮操作 */
      handleAdd (row) {
        this.reset()
        if (row != null && row.id) {
          this.form.pid = row.id
        } else {
          this.form.pid = 0
        }
        this.open = true
        this.title = '添加菜单'
      },
      /** 修改按钮操作 */
      handleUpdate (row) {
        this.reset()
        this.form = JSON.parse(JSON.stringify(row))
        this.open = true
        this.title = '修改菜单'
      },
      /** 提交按钮 */
      submitForm: function () {
        this.$refs['form'].validate(valid => {
          if (valid) {
            if (this.form.id !== undefined) {
              this.form.modifiedTime = undefined
              updateMenu(this.form).then(response => {
                if (response.data.code === 200) {
                  this.msgSuccess('修改成功')
                  this.open = false
                  this.getList()
                }
              })
            } else {
              addMenu(this.form).then(response => {
                if (response.data.code === 200) {
                  this.msgSuccess('新增成功')
                  this.open = false
                  this.getList()
                }
              })
            }
          }
        })
      },

      /** 删除按钮操作 */
      handleDelete (row) {
        this.$confirm('是否确认删除名称为"' + row.name + '"的数据项?', '警告', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          delMenu(row.id).then(res => {
            if (res.data.code === 200) {
              this.msgSuccess('删除成功')
              this.getList()
            }
          })
        })
      },
      //关闭弹出框
      closeDialog () {
        this.cancel()
      },
    }
  }
</script>
